// import React, { Component, createRef, forwardRef } from "react";

// const FancyButton = forwardRef((props, ref) => {
//   // console.log(ref);
//   const onButtonClick = () => {
//     ref.current.focus();
//   };
//   return (
//     <div>
//       <input type="text" ref={ref} />
//       <button onClick={onButtonClick}>{props.children}</button>
//     </div>
//   );
// });

// export default class App extends Component {
//   constructor() {
//     super();
//     this.ref = createRef();
//   }
//   render() {
//     return (
//       <div>
//         {/* <input type="text" ref="inputRef" /> */}
//         <FancyButton ref={this.ref}>Click me!</FancyButton>
//       </div>
//     );
//   }
// }

import React, { useRef } from "react";

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

export default function App() {
  return (
    <div>
      App
      <TextInputWithFocusButton></TextInputWithFocusButton>
    </div>
  );
}
